<template>
	<div class="zxhleft">
		<div class="zxhleft1">
			<ul>
				<li v-for="(item,ind) in zxhleft" @click="zxhle(item,ind)" key= "$index" :class="ind==index?'active':''">
						<img :src="item.pictureUrl" alt="">
						<p>
							{{item.categoryName}}
						</p>
				</li>
			</ul>
		</div>
		<div class="zxh-sort">
			<ul>
				<li v-for="m in zxhright" >
					<router-link to="/sortthree">
						<img :src="m.pictureUrl">
						<p>
							{{m.categoryName}}
						</p>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script type="text/javascript">
	import {swiper,swiperSlide} from 'vue-awesome-swiper';
	export default{
		data(){
			return {
				zxhleft:[],
				zxhright:[],
				index:0
			}
		},
		methods:{
			request(str){
				this.$http({
					url:"http://m.laiyifen.com/api/category/list",
					method:"get",
					params:{
						parentId:0,
						level:1,
						companyId:30
					}
				}).then(function(res){
					this.zxhleft = res.body.data.categorys;
					console.log(this.zxhleft)
				}),
				this.$http({
					url:"http://m.laiyifen.com/api/category/list",
					method:"get",
					params:{
						parentId:str || '1008024400000022',
						level:1,
						companyId:30
					}
				}).then(function(res){
					this.zxhright = JSON.parse(res.bodyText).data.categorys[0].children
					console.log(this.zxhright)
				})
			},
			zxhle(e,l){
				this.request(e.categoryId)
				console.log(l)
				this.index=l
			}
		},
		mounted(){
			this.request()	
		}
	}
</script>

<style type="text/css" scoped>
	li.active{
		color: #ff6900;
		border-left:.12rem solid #ff6900;
		background: #f0f0f0;
	}
	.zxhleft{
		display: flex;
	}
	.zxhleft1{
		width: 25%;
		text-align: center;
		margin-top: 1.2rem;
		overflow-y: scroll;
		height: 100%;
		position: fixed;
	}
	.zxhleft1>ul>li{
		height: 1.4rem;
		line-height: 1.4rem;
		border-bottom: .01rem solid #333;
		position: relative;
	}
	.zxhleft1>ul>li>a{
		display: inline-block;
		height: 1.4rem;
		line-height: 1.4rem;
		width: 100%;
	}
	.zxhleft1>ul>li p,.zxhleft1>ul>li img{
		height: 50%;
	}
	.zxhleft1>ul>li img{
		height: 35%;
		width: 20%;
		position: absolute;
		top: 10%;
		left: 40%;
	}
	.zxhleft1>ul>li p{
		position: absolute;
		left: 25%;
		top: 20%;
	}

	.zxh-sort{
		position: fixed;
		right: 0;
		top: 7%;
		left: 25%;
		bottom: 0;
		background: #e5e5e5;
		width: 75%;
	}
	.zxh-sort>ul{
		
		display: flex;
		width: 90%;
		margin: 0 auto;
		flex-wrap: wrap;
	}
	.zxh-sort>ul>li{
		margin-left: 3%;
		width: 30%;
		background: #fff;
		margin-top:  .3232rem;
		text-align: center;
	}
	.zxh-sort>ul>li img{
		width: 100%;
	}
	.zxh-sort>ul>li p{
		padding-bottom: .26775rem;
	}
	a{
		color: #999;
	}
</style>